<template>
<view class="cu-bar tabbar bg-white foot">
	<view class="action" :style="{color: defaultValue==index ? activeColor : color}" v-for="(item,index) in tabBar" @click="navClick(item,index)">
		<view class="img" v-if="item.iconPath">
			<image :src="item.iconPath" :style="{width: iconSize + 'rpx', height: iconSize + 'rpx'}" v-if="current != index" />
			<image :src="item.selectedIconPath" :style="{width: iconSize + 'rpx', height: iconSize + 'rpx'}" v-if="current == index" />
		</view>
		<view v-if="item.icon"><component :is="item.icon" :style="{width: iconSize + 'rpx', height: iconSize + 'rpx'}" :fill="defaultValue==index ? activeColor : color" /></view>
		<view>{{ item.text }}</view>
	</view>
</view>
</template>

<script>
export default{
	emits: ['tabSelect'],
	props:{
		current:{
			type:[String, Number],
			default: 0
		},
		tabBar:{
			type: Object,
			default: () => ({})
		},
		iconSize: {
			type: Number,
			default: 40
		},
		color: {
			type: String,
			default: '#555'
		},
		activeColor: {
			type: String,
			default: '#09bb07'
		}
	},
	watch: {
		current: {
			handler(val) {
				this.defaultValue = val
			},
			deep: true,
			immediate: true
		}
	},
	data() {
		return {
			defaultValue: 0
		}
	},
	methods: {
		navClick(e, index) {
			this.defaultValue = index
			this.$emit('tabSelect', index)
		}
	}
}
</script>
